<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div id="maps" style="
    width:100%;height: 50vh; margin-top: 100px;
    "></div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import {ref,onMounted} from 'vue'
import $ from 'jquery'
import { tr } from 'element-plus/es/locale/index.mjs';

onMounted(()=>{
  let adcode = 100000
let geoJsons:any = null 

 var myChart = echarts.init(document.getElementById('maps'));
  window.addEventListener('resize', function() {
    myChart.resize();
  });

var chartDom = document.getElementById('maps')!;

var myChart = echarts.init(chartDom);
var option;

myChart.showLoading();
function fn(adcode:any){
    $.get(`https://geo.datav.aliyun.com/areas_v3/bound/${adcode}_full.json`, function (geoJson:any) {
  myChart.hideLoading();

  echarts.registerMap('HK', geoJson);

  myChart.setOption(
    (option = {
      title: {
        sublink:
          'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12',
           textStyle:{
          color:'#000'
         }
         
      },
      tooltip: {
        trigger: 'item',
        formatter: `{b}<br/>{c} (p / km2)`
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
      },
      
   
      series: [
        {
          name: '香港18区人口密度',
          type: 'map',
          map: 'HK',
          show:true,
          label: {
            show: true,
              textStyle:{
                show:true,
                color:"#000"
              }
            
           
          },
         
          itemStyle: {
            // 地图区域的颜色
            normal: {
                areaColor: 'rgba(0, 255, 255, 0.8)', // 地图区域的颜色
                borderColor: '#fff', // 区域边界线颜色
                borderWidth: 1.5 // 区域边界线宽度
            }
        }
        },
      ]
    })
  );
  geoJsons = geoJson
});
   
}

 fn(adcode)
    myChart.on('click',(params)=>{
        console.log(params);
        console.log(geoJsons);
        const list = geoJsons.features.find((item:any)=>item.properties.name==params.name)
        console.log(list);
        adcode = list.properties.adcode
        fn(adcode)
        
    })

})


</script>

<style scoped>

</style>